<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath(); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="<%=cp%>/data/css/common.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/reservation/css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/reservation/css/style1.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/reservation/css/style2.css" rel="stylesheet" type="text/css" />
<link href="<%=cp%>/reservation/css/board.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=cp%>/data/js/jquery-1.8.2.js"></script>
<script type="text/javascript">

$(function() {        
	
	if("${userId}" == null || "${userId}" == ""){
		location.href = "<%=cp%>/member/login.action";
		return
	}
});

//예약자가 여행자일경우..
function PtrChk(obj) {

    //선택
    if (obj.checked) {

        $("input[name='t_korName_1']").eq(0).val($("#korName").val());        //이름
        $("input[name='t_engName_1']").eq(0).val($("#engName").val());        //영이름
        $("input[name='t_birth_1']").eq(0).val($("#birth").val());        //이름
        $("input[name='t_email_1']").eq(0).val($("#email").val());        //이름
        $("input[name='t_tel_1']").eq(0).val($("#phone").val());        //이름
    }else{
    	$("input[name='t_korName_1']").eq(0).val("");
    	$("input[name='t_engName_1']").eq(0).val("");
    	$("input[name='t_birth_1']").eq(0).val("");
    	$("input[name='t_email_1']").eq(0).val("");
    	$("input[name='t_tel_1']").eq(0).val("");
    }
       
}

// 여행자 선택수에 맞게 입력폼 생성
function TotNoChk(v){
	
	document.getElementById("divAdd2").setAttribute("style","display:none");
	document.getElementById("divAdd3").setAttribute("style","display:none");
	document.getElementById("divAdd4").setAttribute("style","display:none");
	document.getElementById("divAdd5").setAttribute("style","display:none");
	document.getElementById("divAdd6").setAttribute("style","display:none");
	
	for (i=2; i<=v; i++){
		document.getElementById("divAdd"+i).style.display = "block";

	}
	
	$(function(){
		$(totalNum).html(v);
	}); 
		
	
	//$("totalNum").html(v);

}

function chkReservation(action){
	f = document.form1;
	
	if(action == "reservation"){
		f.action = "<%=cp%>/reservation/created.action";
		f.submit();
	}
	
}

</script>
</head>
<body>
<div id="wrap">
  <div id="container">
    <div id="contents5">
      <form name="form1" id="form1" action="OverseasReservationInfo" method="post">
        <h3 class="h3Type8"> <img alt="예약정보입력" src="<%=cp%>/reservation/image/reser_info_input.jpg" complete="complete"/></h3>
        <div class="notice_box"> 
        <strong class="fontCol02"> 
        	고객님께서 선택하신 상품은, 담당자의 확인 후 예약이 확정되는 상품입니다.</strong><br/>
          	담당자가 정보를 확인 후, 이메일이나 전화로 신속히 연락을 드리도록 하겠습니다. 
          </div>
        <!--  선택상품정보  -->
        <div class="roundBottom20">
          	<div class="roundTop20">
              <h4 class="h4Type12"> <img alt="선택상품정보 : 고객님께서 선택하신 상품정보입니다" src="<%=cp%>/reservation/image/select_goods_info.jpg" 
                    complete="complete"/></h4>
            <div class="goods_name">
              <p class="marT5"> <strong>${goods.subject}</strong></p>
            </div>
            <table width="100%" class="infoData2 tb_bgShadow" border="0" cellspacing="0" cellpadding="0">
              <colgroup>
                <col width="15%"/>
                <col width="68%"/>
                <col width="12%"/>
              </colgroup>
              <tbody>
                <tr class="first">
                  <th width="20%">상품코드</th>
                  <td width="76%">${goods.goodsNo} 번</td>
                </tr>
                <tr>
                  <th>여행기간</th>
                  <td>${goods.dateNal} 일</td>
                </tr>
                <tr>
                  <th>이용항공사</th>
                  <td>${goods.airLineName}</td>
                </tr>
                <tr>
                  <th>출발일</th>
                  <td>${goods.startDate} [${goods.startAirName}]</td>
                </tr>
                <tr>
                  <th>도착일</th>
                  <td>${goods.endDate} [${goods.endAirName}]</td>
                </tr>
                <tr>
                  <th>1인</th>
                  <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td style="border-bottom: 0px; border-left: 0px; 
                            padding-bottom: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; 
                            padding-top: 0px;"><b>1인</b></td>
                        <td style="border-bottom: 0px; text-align: left; border-left: 0px; padding-bottom: 0px; 
                            padding-left: 0px; width: 125px; padding-right: 0px; border-top: 0px; border-right: 0px; 
                            padding-top: 0px;"/>  
                        <td style="border-bottom: 0px; text-align: right; border-left: 0px; padding-bottom: 0px; 
                            padding-left: 0px; width: 100px; padding-right: 0px; color: #de2667; border-top: 0px; 
                            border-right: 0px; padding-top: 0px;"><b>${goods.price}원</b></td>
                      </tr>
                    </tbody>
                  </table></td>
                </tr>
               <tr>
                 <td colspan="2">
                 <div class="counsel_guide2">
                   <ul>
                     <li> <img alt="여행상담" src="<%=cp%>/reservation/image/travle_consel.jpg" 
                       complete="complete"/></li>
                     <li> <img alt="전화번호" src="<%=cp%>/reservation/image/tel_img.jpg" 
                       complete="complete"/> <strong>Tel<span class="fontCol02">02-726-5801</span></strong> </li>
                   </ul>
                 </div>
                 </td>
               </tr>
             </table>
          </div>
        </div>
        <!-- 예매자 입력폼 -->
      	<div class="roundBottom20">
          	<div class="roundTop20">
              <h4 class="h4Type12"> <img src="<%=cp%>/reservation/image/reser_pep_input.jpg" /></h4>
              <p class="input_guide2"><span class="floatR"><b>
              <img alt="필수" src="<%=cp%>/reservation/image/icon_required.jpg" complete="complete"/>
              	표시된 부분은 필수입력사항입니다</b></span></p>
            
            <table width="100%" class="infoData2" cellSpacing="0" cellPadding="0">
            	<colgroup>
            		<col width="15%"/>
            		<col width="35%"/>
            		<col width="15%"/>
            		<col width="35%"/>
            	</colgroup>
            	<tbody>
            		<tr>
            			<th class="bgCheck">한글이름</th>
            			<td><input name="korName" class="type_text2" id="korName" type="text" size="24" value="${user.korName}"/></td>
            			<th>영문이름</th>
            			<td><input name="engName" class="type_text2" id="engName" type="text" size="12" value="${user.engName}"/></td>
            		</tr>
            		<tr>
            			<th class="bgCheck">생일6자리</th>
            			<td colSpan="3">
            				<input name="birth" class="type_text2" id="birth" type="text" size="6" maxLength="6" value="${user.birth}"/>
            			</td>
            		</tr>
            		<tr>
            			<th class="bgCheck bg_position">이메일</th>
            			<td colSpan="3">
            				<input name="email" class="type_text2" id="email" type="text" size="40" value="${user.email}"/>
            				<p class="second_input fnSmall">* 예약확인및 답변은 회원님의 E-mail로 발송되오니 정확한 정보를 기입해 주시기 바랍니다.</p>
            			</td>
            		</tr>
            		<tr>
            			<th class="bgCheck">전화번호</th>
            			<td colSpan="3">
            				<input name="phone" id="phone" class="type_text2"  type="text" size="15" maxLength="15" value="${user.phone}"/>
            			</td>
            		</tr>
            		<tr>
            			<th class="bgCheck">상담방법</th>
            			<td colSpan="3">
            				<input name="cont" class="type_radio" type="radio" value="Telephone"/>전화
            				<input name="cont" class="type_radio radio_ml" type="radio" CHECKED="checked" value="EMAIL"/>이메일
            			</td>
            		</tr>
            		<tr>
            			<th class="bgCheck">총 여행인원</th>
            			<td colSpan="3">
            				<ul class="member_info">
            					<li>
            						<select name="inwon" class="type_select2" id="inwon" onchange="TotNoChk(this.value);">
            							<option value="1">1</option>
            							<option value="2">2</option>
            							<option value="3">3</option>
            							<option value="4">4</option>
            							<option value="5">5</option>
            							<option value="6">6</option>
            						</select>
            					</li>
            					<li class="total">
            						총 인원 <strong id="totalNum">1</strong>명
            					</li>
            				</ul>
            			</td>
            		</tr>
            	</tbody>
            </table>
           </div>
        </div>
        <!-- 여행자 입력폼 -->
      	<div class="roundBottom20">
          	<div class="roundTop20">
              <h4 class="h4Type12"> <img src="<%=cp%>/reservation/image/an_real.jpg" /></h4>
              <p class="input_guide2">
	              <span class="floatR"><b>
	              <img alt="필수" src="<%=cp%>/reservation/image/icon_required.jpg" complete="complete"/>
	              	표시된 부분은 필수입력사항입니다</b>
	              </span>
	              <input name="ptrchk" class="type_checkbox" id="ptrchk" onclick="PtrChk(this);" type="checkbox" value="Y"/>
	              <b>예약자가 여행을 가시는 경우 여기에 체크하여 주세요.</b>
              </p>
              
            <div class="member_input1">1번째 여행자 정보입력</div>            
            <table width="100%" class="infoData2 tb_bgShadow" cellSpacing="0" cellPadding="0">
	            <colgroup>
	            	<col width="16%"/>
	            	<col width="39%"/>
	            	<col width="13%"/>
	            	<col width="32%"/>
	            </colgroup>
	            <tbody>
	            	<tr class="first">
	            		<th class="bgCheck">한글이름</th>
	            		<td><input name="t_korName_1" id="t_korName" class="type_text2" type="text" size="24"/></td>
	            		<th>영문이름</th>
	            		<td><input name="t_engName_1" class="type_text2" type="text" size="24"/></td>
	            	</tr>
	            	<tr>
	            		<th>생일6자리</th>
	            		<td><input name="t_birth_1" class="type_text2" type="text" size="24"/></td>
	            		<th>휴대폰</th>
	            		<td><input name="t_tel_1" class="type_text2" type="text" size="30"/></td>
	            	</tr>
	            	<tr>
            			<th>이메일</th>
            			<td colSpan="3">
            				<input name="t_email_1" class="type_text2"  type="text" size="40"/>
            			</td>
            		</tr>
	            </tbody>
            </table>
            
            <!-- 추가여행자입력 -->
            <div id="divAdd2" style="display: none;">
            	<div class="member_input1">2번째 여행자 정보입력</div>                       
            <table width="100%" class="infoData2 tb_bgShadow" cellSpacing="0" cellPadding="0">
	            <colgroup>
	            	<col width="16%"/>
	            	<col width="39%"/>
	            	<col width="13%"/>
	            	<col width="32%"/>
	            </colgroup>
	            <tbody>
	            	<tr class="first">
	            		<th class="bgCheck">한글이름</th>
	            		<td><input name="t_korName_2" class="type_text2" type="text" size="24"/></td>
	            		<th>영문이름</th>
	            		<td><input name="t_engName_2" class="type_text2" type="text" size="24"/></td>
	            	</tr>
	            	<tr>
	            		<th>생일6자리</th>
	            		<td><input name="t_birth_2" class="type_text2" type="text" size="24"/></td>
	            		<th>휴대폰</th>
	            		<td><input name="t_tel_2" class="type_text2" type="text" size="30"/></td>
	            	</tr>
	            	<tr>
            			<th>이메일</th>
            			<td colSpan="3">
            				<input name="t_eamil_2" class="type_text2" id="ptrem1" style="ime-mode: inactive;" type="text" size="40"/>
            			</td>
            		</tr>
	            </tbody>
            </table>
            </div>
            <!-- 3 -->
            <div id="divAdd3" style="display: none;">
            <div class="member_input1">3번째 여행자 정보입력</div>            
            <table width="100%" class="infoData2 tb_bgShadow" cellSpacing="0" cellPadding="0">
	            <colgroup>
	            	<col width="16%"/>
	            	<col width="39%"/>
	            	<col width="13%"/>
	            	<col width="32%"/>
	            </colgroup>
	            <tbody>
	            	<tr class="first">
	            		<th class="bgCheck">한글이름</th>
	            		<td><input name="t_korName_3" class="type_text2" type="text" size="24"/></td>
	            		<th>영문이름</th>
	            		<td><input name="t_engName_3" class="type_text2" type="text" size="24"/></td>
	            	</tr>
	            	<tr>
	            		<th>생일6자리</th>
	            		<td><input name="t_birth_3" class="type_text2" type="text" size="24"/></td>
	            		<th>휴대폰</th>
	            		<td><input name="t_tel_3" class="type_text2" type="text" size="30"/></td>
	            	</tr>
	            	<tr>
            			<th>이메일</th>
            			<td colSpan="3">
            				<input name="t_eamil_3" class="type_text2" id="ptrem1" style="ime-mode: inactive;" type="text" size="40"/>
            			</td>
            		</tr>
	            </tbody>
            </table>
            </div>
            <!-- 4 -->
            <div id="divAdd4" style="display: none;">
            <div class="member_input1">4번째 여행자 정보입력</div>            
            <table width="100%" class="infoData2 tb_bgShadow" cellSpacing="0" cellPadding="0">
	            <colgroup>
	            	<col width="16%"/>
	            	<col width="39%"/>
	            	<col width="13%"/>
	            	<col width="32%"/>
	            </colgroup>
	            <tbody>
	            	<tr class="first">
	            		<th class="bgCheck">한글이름</th>
	            		<td><input name="t_korName_4"  class="type_text2" type="text" size="24"/></td>
	            		<th>영문이름</th>
	            		<td><input name="t_engName_4" class="type_text2" type="text" size="24"/></td>
	            	</tr>
	            	<tr>
	            		<th>생일6자리</th>
	            		<td><input name="t_birth_4" class="type_text2" type="text" size="24"/></td>
	            		<th>휴대폰</th>
	            		<td><input name="t_tel_4" class="type_text2" type="text" size="30"/></td>
	            	</tr>
	            	<tr>
            			<th>이메일</th>
            			<td colSpan="3">
            				<input name="t_eamil_4" class="type_text2" id="ptrem1" style="ime-mode: inactive;" type="text" size="40"/>
            			</td>
            		</tr>
	            </tbody>
            </table>
            </div>
            <!-- 5 -->
            <div id="divAdd5" style="display: none;">
            <div class="member_input1">5번째 여행자 정보입력</div>            
            <table width="100%" class="infoData2 tb_bgShadow" cellSpacing="0" cellPadding="0">
	            <colgroup>
	            	<col width="16%"/>
	            	<col width="39%"/>
	            	<col width="13%"/>
	            	<col width="32%"/>
	            </colgroup>
	            <tbody>
	            	<tr class="first">
	            		<th class="bgCheck">한글이름</th>
	            		<td><input name="t_korName_5" class="type_text2" type="text" size="24"/></td>
	            		<th>영문이름</th>
	            		<td><input name="t_engName_5" class="type_text2" type="text" size="24"/></td>
	            	</tr>
	            	<tr>
	            		<th>생일6자리</th>
	            		<td><input name="t_birth_5" class="type_text2" type="text" size="24"/></td>
	            		<th>휴대폰</th>
	            		<td><input name="t_tel_5" class="type_text2" type="text" size="30"/></td>
	            	</tr>
	            	<tr>
            			<th>이메일</th>
            			<td colSpan="3">
            				<input name="t_eamil_5" class="type_text2" id="ptrem1" style="ime-mode: inactive;" type="text" size="40"/>
            			</td>
            		</tr>
	            </tbody>
            </table>
            </div>
            
            <!-- 6 -->
            <div id="divAdd6" style="display: none;">
            <div class="member_input1">6번째 여행자 정보입력</div>            
            <table width="100%" class="infoData2 tb_bgShadow" cellSpacing="0" cellPadding="0">
	            <colgroup>
	            	<col width="16%"/>
	            	<col width="39%"/>
	            	<col width="13%"/>
	            	<col width="32%"/>
	            </colgroup>
	            <tbody>
	            	<tr class="first">
	            		<th class="bgCheck">한글이름</th>
	            		<td><input name="t_korName_6" class="type_text2" type="text" size="24"/></td>
	            		<th>영문이름</th>
	            		<td><input name="t_engName_6" class="type_text2" type="text" size="24"/></td>
	            	</tr>
	            	<tr>
	            		<th>생일6자리</th>
	            		<td><input name="t_birth_6" class="type_text2" type="text" size="24"/></td>
	            		<th>휴대폰</th>
	            		<td><input name="t_tel_6" class="type_text2" type="text" size="30"/></td>
	            	</tr>
	            	<tr>
            			<th>이메일</th>
            			<td colSpan="3">
            				<input name="t_eamil_6" class="type_text2" id="ptrem1" style="ime-mode: inactive;" type="text" size="40"/>
            			</td>
            		</tr>
	            </tbody>
            </table>
            </div>
            <!-- 추가여행자 끝 -->
            
           </div>
        </div>
      
     	<!-- 추가 메모사항  -->
     	<div class="roundBottom20">
     		<div class="roundTop20">
     			<h4 class="h4Type12"><img alt="추가요청사항 : 요청사항 및 특이사항을 작성해 주세요" src="<%=cp%>/reservation/image/an_plus.jpg" complete="complete"/></h4>
     			<textarea name="memo" class="add_request" id="ptrreq" rows="7"></textarea>
     		</div>
     	</div>
     	
     	<!-- 공지 -->
     	<div class="roundBottom19">
     		<div class="roundTop19">
     			<div class="notice_box2">
     				<p>
     					<img alt="notice" src="<%=cp%>/reservation/image/icon_notice.jpg" complete="complete"/>
     					<strong>꼭 읽어주세요!</strong>
     				</p>
     				<p>
     					<strong class="fontCol02">
     					고객님께서 선택하신 상품은, 담당자의 확인 후 예약이 확정되는 상품입니다.<br/>
     					</strong>
     					텍스트 - 담당자가 정보를 확인 후, 이메일이나 전화로 신속히 연락을 드리도록 하겠습니다.
     				</p>
     			</div>
     			<div class="notice_box2">
     				<p class="title">
     					<img alt="notice" src="<%=cp%>/reservation/image/icon_notice.jpg" complete="complete"/>
     					 보이스피싱 주의
     				</p>
     				<p>
     					한진관광 여행요금 입금은 예금주가 ㈜한진관광인 계좌로만 입금을 받고 있습니다.<br/>
						개인계좌로의 입금은 일체 없습니다. 여행사직원을 사칭한 보이스피싱에 주위하시기 바랍니다.
     				</p>
     			</div>
     		</div>
     	</div>
     	<div class="btnArea1">
     		<input type="hidden" name="userId" value="${userId}"/>
     		<input type="hidden" name="mode" value="${mode}"/>
     		<input type="hidden" name="gubun" value="1"/>
     		<input type="hidden" name="gubunNo" value="1"/><!-- 구분값 받아간다. -->
     		<img style="cursor: pointer;" onclick="chkReservation('cancel');" alt="취소" src="<%=cp%>/reservation/image/icon_cancel.jpg" complete="complete"/>
     		<img style="cursor: pointer;" onclick="chkReservation('reservation');" alt="예약하기" src="<%=cp%>/reservation/image/icon_reservation.jpg" complete="complete"/>
     	</div>
      </form>
    </div>
  </div>
</div>
</body>
</html>